<template>
  <div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="随机分组" name="custom"></el-tab-pane>
        <el-tab-pane label="自定义分组" name="self"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="activeName === 'custom'">
      <div class="content-box" v-for="(item,index) in qqq" :key='index'>
        <div class="content-title">
          {{ item.examStartDate.substr(0, 16) }}  ~ {{ item.examEndDate.substr(5, 11) }}  {{ item.stationName }}
        </div>
        <div class="student-box" v-for="(items, i) in item.recordsStationStudentEntityList" :key='i'>
          {{ i + 1 }} 、{{ items.studentName }}
        </div>
      </div>
    </div>

    <div class="itxst content-box" v-if="activeName === 'self'">
      <div class="itxst">
        <div class="col">
          <div class="content-title">全部考生</div>
          <draggable
            v-model="studentsList"
            :group="groupA"
            animation="300"
            dragClass="dragClass"
            ghostClass="ghostClass"
            chosenClass="chosenClass"
          >
            <transition-group :style="style">
              <div class="item" v-for="item in studentsList" :key="item.id">
                {{ item.studentName }}
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="col">
          <div v-for="(item, index) in selfTabsList" :key="index">
            <!-- <div class="title">{{ item.examEndDate }}</div> -->
            <div class="content-title">
              {{ item.examStartDate.substr(0, 16) }}  ~ {{ item.examEndDate.substr(5, 11) }} {{ item.stationName }}
            </div>
            <draggable
              v-model="item.chirden"
              :group="groupB"
              animation="300"
              :scroll="true" 
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
            >
              <transition-group :style="style">
                <div class="item" v-for="(ite, idx) in item.chirden" :key="item">
                  {{ ite.studentName }}
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { studentRandomization, recordsstationstudentList } from '@/api/examTest.js'
import { studentRandomization, recordsstationstudentSave, recordsstationstudentTreeList } from '@/api/examTest.js'
import { studentList } from '@/api/examinee.js'
export default {
  props: ['studentPoolId', 'recordsId', 'passwordCheck'],
  name: 'HelloWorld1',
  components: { draggable },
  data () {
    return {
      qqq: [],
      activeName: 'custom',
      customList: [],
      selfTabsList: [],
      drag: false,
      message: '',
      groupA: {
        name: 'itxst',
        put: true,
        pull: true
      },
      groupB: {
        name: 'itxst',
        pull: true,
        put: true
      },
      // 定义要被拖拽对象的数组
      studentsList: [],
      arr2: [
        {
          title: '1组',
          chirden: []
        },
        {
          title: '2组',
          chirden: []
        },
        {
          title: '3组',
          chirden: []
        },
        {
          title: '4组',
          chirden: []
        }
      ],
      studentsListLength: 0,
      chooseCurrentFlag: 0,
      // 空数组之在的样式，设置了这个样式才能拖入
      style: 'min-height:120px;display: block;'
    }
  },
  methods: {
    // 开始拖拽事件
    onStart () {
      this.drag = true
      return true
    },
    // 拖拽结束事件
    onEnd () {
      this.drag = false
    },

    // 获取学生列表
    getStudentList () {
      let params = {
        page: 1,
        limit: 10000,
        studentPoolId: this.studentPoolId || 'dc3b87a2f52863be2b5b382af1c1f507',
        orderSql: 'creat_date desc'
      }
      console.log('params', params)
      studentList(params).then(res => {
        this.studentsList = res.data.page.records
        this.studentsListLength = this.studentsList.length
      })
    },

    // 随机分组
    getStudentRandomization () {
      let params = {
        recordsId: this.recordsId,
        studentPoolId: this.studentPoolId || 'dc3b87a2f52863be2b5b382af1c1f507'
      }
      studentRandomization(params).then(res => {
        this.customList = res.data.show
        this.selfTabsList = []
        this.qqq = []
        res.data.show.map(we => {
          we.groupRecordsStations.map(as => {
            Object.assign(as, {
              examStartDate: we.examStartDate,
              examEndDate: we.examEndDate,
              recordsDateId: we.examRecordsDateId
            })
            this.qqq.push(as)
          })
        })
        console.log(this.qqq, 'this.qqq')
        this.customList.map(val => {
          val.groupRecordsStations.map(q => {
            let params = {
              examStartDate: val.examStartDate,
              examRecordsDateId: val.examRecordsDateId,
              examEndDate: val.examEndDate,
              groupRecordsStationsId: q.id,
              stationId: q.stationId,
              stationName: q.stationName,
              stationNumber: q.stationNumber,
              chirden: []
            }
            this.selfTabsList.push(params)
            console.log(this.selfTabsList)
          })
        })
      })
    },
    handleClick (val) {
      console.log(val.name)
      this.getStudentRandomization()
      this.getStudentList()
    },
    // 第三步保存
    thirdSubmitHandle () {
      if (this.activeName === 'custom') {
        let par = []
        this.qqq.map(q => {
          q.recordsStationStudentEntityList.map(v => {
            let obj = {
              recordsId: this.recordsId,
              recordsDateId: q.recordsDateId,
              recordsStationId: q.id,
              recordsStationNumber: q.stationNumber,
              recordsStationName: q.stationName,
              round: v.round,
              scene: v.scene,
              studentId: v.studentId,
              studentPool: v.studentPool,
              studentName: v.studentName,
              studentIdcard: v.studentIdcard,
              studentMobile: v.studentMobile,
              studentStatus: null,
              trainingBase: v.trainingBase
            }
            par.push(obj)
          })
        })
        console.log(par)

        recordsstationstudentSave(par).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '考生信息保存成功'
          })
          this.$emit('changeTab')
        })
      } else {
        this.chooseCurrentFlag = 0
        let studentCount = this.studentsListLength / this.selfTabsList.length
        let studentCountMin = Math.floor(studentCount)
        let studentCountMax = Math.ceil(studentCount)
        if (this.studentsList.length !== 0) {
          this.$message.warning('请先分配全部考生')
        } else {
          this.selfTabsList.map((v) => {
            if (v.chirden.length < studentCountMin || v.chirden.length > studentCountMax) {
              this.chooseCurrentFlag ++
            }
          })
          if (this.chooseCurrentFlag > 0) {
            this.$message.warning('考生分配不合理')
          } else {
            console.log('q', this.selfTabsList)
            let par = []
            this.selfTabsList.map(q => {
              q.chirden.map((v, index) => {
                let obj = {
                  recordsId: this.recordsId,
                  recordsDateId: q.examRecordsDateId,
                  recordsStationId: q.stationId,
                  recordsStationNumber: q.stationNumber,
                  recordsStationName: q.stationName,
                  round: index + 1,
                  scene: 1,
                  studentId: v.id,
                  // 不知道是啥
                  studentPool: v.studentPool || '',
                  studentName: v.studentName,
                  studentIdcard: v.studentIdcard,
                  studentMobile: v.studentMobile,
                  studentStatus: null,
                  trainingBase: v.trainingBase
                }
                par.push(obj)
              })
            })
            console.log(par)
            recordsstationstudentSave(par).then(res => {
              this.$message({
                type: 'success',
                message: '考生信息保存成功'
              })
              console.log(res)
              this.$emit('changeTab')
            })
          }
        }
      }
    },

    // 获取第三步的数据
    getRecordsstationstudentList () {
      let params = {
        recordsId: this.recordsId,
        scene: 1
      }
      if (this.passwordCheck !== '') {
        params.password = this.passwordCheck
        params.passwordType = '1'
      } else {
        params.passwordType = '0'
      }
      recordsstationstudentTreeList(params).then(res => {
        if (res.data.show === '') {
          this.getStudentRandomization()
        } else {
          this.customList = res.data.show
          this.selfTabsList = []
          this.qqq = []
          res.data.show.map(we => {
            we.groupRecordsStations.map(as => {
              Object.assign(as, {
                examStartDate: we.examStartDate,
                examEndDate: we.examEndDate,
                recordsDateId: we.examRecordsDateId
              })
              this.qqq.push(as)
            })
          })
          console.log(this.qqq, 'this.qqq')
          this.customList.map(val => {
            val.groupRecordsStations.map(q => {
              let params = {
                examStartDate: val.examStartDate,
                examRecordsDateId: val.examRecordsDateId,
                examEndDate: val.examEndDate,
                groupRecordsStationsId: q.id,
                stationId: q.stationId,
                stationName: q.stationName,
                stationNumber: q.stationNumber,
                chirden: []
              }
              this.selfTabsList.push(params)
              console.log(this.selfTabsList)
            })
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.ghostClass {
  background-color: #eee !important;
}

.chosenClass {
  background-color: #eee !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: #eee !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  margin: 10px;
  display: flex;
  width: 100%;
}
// .itxst div {
//   flex: 0 0 45%;
// }
.title {
  padding: 6px 12px;
}

.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item + .item {
  border-top: none;
  margin-top: 6px;
}

.col {
  margin: 12px;
  width: 100%;
  border: solid 1px #eee;
  border-radius: 5px;
}
.content-box{
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  .content-title{
    font-size: 16px;
    padding-bottom: 10px;
    margin: 10px 0;
    font-weight: 500;
    text-indent: 10px;
    position: relative;
    border-bottom: 1px solid #00b99e;
  }
  .content-title:before{
    position: absolute;
    content: '';
    left: 0;
    top: 2px;
    height: 14px;
    width: 4px;
    border-radius: 4px;
    background: #00b99e;

  }
  .student-box{
    padding: 8px 0;
    margin: 2px 0;
    border-bottom: 1px dotted #00b99e80;
  }
}
</style>